<template>
  <div class="user-list">
    <h3>社区管理</h3>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="index" label="序号" width="100" />
      <el-table-column label="用户" prop="username" />
      <el-table-column label="歌曲" prop="song_name" />
      <el-table-column label="分享描述" prop="content" show-overflow-tooltip width="300" />
      <el-table-column label="点赞数" prop="like_count" />
      <el-table-column label="评论数" prop="comment_count" />
      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页器 -->
    <div class="page">
      <el-pagination :page-size="pageSize" :pager-count="pageSize" layout="prev, pager, next" :total="totalNum"
        @change="changePageFn" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { userList } from '../../api/request'
import api from '@/api/http'
import { ElMessage, ElMessageBox } from 'element-plus'


// 定义接口，形容对象的结构
// interface User {
//     date: string
//     user_name: string
//     user_email: string
//     user_phone: string
//     user_sex: number
//     id?: number | string
// }


// 社区动态列表数据
const tableData = ref<any>([])

// 社区动态总数
let totalNum = ref(0)
let page = ref(1)
let pageSize = ref(11)

// 定义函数获取社区动态列表
const communityListFn = async (page = 1, pageSize = 10) => {
  await api.getCommunityList({ page, pageSize }).then(
    content => {
      let { code, total, result } = content;
      if (code == 200) {
        let newArr = result.map((item: any, i: number) => {
          item.index = i + 1;
          return item
        })
        tableData.value = newArr;
        totalNum.value = total;
      }
      else {
        console.log("获取社区动态列表失败");

      }
    }
  )
}

// 点击删除社区动态
const handleDelete = (index: number, row: any) => {

  // 获取当前点击的选项
  let { post_id } = row;
  console.log(post_id);
  

  ElMessageBox.confirm(
    `是否删除这个动态?`,
    '提示',
    {
      distinguishCancelAndClose: true,
      confirmButtonText: '确定',
      cancelButtonText: '取消',
    }
  )
    .then(async () => {
      // 删除用户
      await api.removeCommunity({ post_id })
        .then(
          content => {
            let { code, msg } = content;
            if (code != 200) {
              ElMessage.error(msg)
            }
          }
        )
      // 删除程序中数组对应的数据
      tableData.value.splice(index, 1);
    })
    .catch(() => {
      console.log("点击取消")
    })
}

// 点击分页时执行的函数
const changePageFn = (num: number) => {
  // console.log(value)
  page.value = num;
  communityListFn(page.value, pageSize.value);
}

// 初始化社区动态列表
communityListFn(page.value, pageSize.value);

</script>

<style lang="scss">
.user-list {
  h3 {
    margin-bottom: 15px;
  }

}

.page {
  margin-top: 15px;
  background-color: #fff;
  padding: 10px 10px;
}
</style>